<template>
    <show-modal :title="title" :loading="loading" width="500px" @cancel="cancel" @submit="submit">
        <a-form-model ref="form" :model="form" :rules="rules" v-bind="layout">
            <a-form-model-item label="设备名称" prop="deviceName">
                <a-input v-model="form.deviceName" placeholder="请输入设备名称" />
            </a-form-model-item>
            <a-form-model-item label="设备编码" prop="deviceCode">
                <a-input v-model="form.deviceCode" :disabled="form.id?true:false" :maxLength="20" placeholder="请输入设备编码" />
            </a-form-model-item>

            <a-form-model-item label="设备坐标" prop="deviceLocation">
                <a-button style="width:100%;text-align:left;" @click="showMap = true">{{
                    form.deviceLocation ? form.deviceLocation : '设置设备坐标'
                }}</a-button>
            </a-form-model-item>
            <a-form-model-item label="设备地址" prop="deviceAddress">
                <a-input v-model="form.deviceAddress" placeholder="请输入设备地址" />
            </a-form-model-item>

            <a-form-model-item label="产品" prop="pdtCode">
                <a-select v-model="form.pdtCode" style="width:100%;" show-search optionFilterProp="name" placeholder="请选择产品">
                    <a-select-option v-for="product in productList"
                        :name="product.pdtName+product.pdtCode"
                        :value="product.pdtCode"
                        :key="product.pdtCode">
                        {{ product.pdtName }}
                    </a-select-option>
                </a-select>
            </a-form-model-item>



            <a-form-model-item label="备注信息" prop="remark">
                <a-textarea v-model="form.remark" :maxlength="50" placeholder="请输入备注信息" />
            </a-form-model-item>

            <a-form-model-item label="状态">
                <a-switch :checked="form.status == 'active' ? true : false" @change="onChangeShow" />
            </a-form-model-item>
        </a-form-model>

        <template v-if="showMap">
            <show-map :location="form.deviceLocation" :address="form.deviceAddress" @cancel="showMap = false" @submit="getLocation" />
        </template>

    </show-modal>
</template>

<script>
import { rules } from './rules';
import { addInfo, updateInfo } from '@/api/device';
import ShowMap from '@/views/components/map'
import UploadAvatar from '@/components/uploadAvatar'
import productApi from '@/api/product/list'

export default {
    name: 'CompanyInfo',
    components:{
        UploadAvatar,
        ShowMap
    },
    props: {
        info: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            loading: false,
            title: '设备信息',
            rules,
            form: {
                deviceName: '',
                deviceCode: '',
                deviceAddress:'',
                deviceLocation:'',
                pdtCode: undefined,
                remark: '',
                status: 'active'
            },
            layout: {
                labelCol: { span: 5 },
                wrapperCol: { span: 19 }
            },
            productList:[],
            showMap:false
        };
    },
    watch:{
        'form.pdtCode':function(value){
            if(this.productList && this.productList.length){
                let product = this.productList.find(item=>item.pdtCode==value);
                if(product){
                    let {radius=null,ctgCode,ctgName,pdtName} = product;
                    this.form = {
                        ...this.form,
                        radius,ctgCode,ctgName,pdtName
                    }
                    console.log(product)
                }
            }
        }
    },
    async created() {
        await this.getProductList();
        this.form = { ...this.form, ...this.info };
    },
    methods: {
        submit() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        this.loading = true;
                        let res = null;
                        if (this.form.id) {
                            //编辑
                            res = await updateInfo(this.form);
                        } else {
                            //新增
                            res = await addInfo(this.form);
                        }
                        this.$message.success('操作成功!');
                        this.$emit('submit');
                    } finally {
                        this.loading = false;
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //获取经纬度
        getLocation(e) {
            console.log(e)
            let {lnglat,address} = e;
            this.form.deviceLocation = lnglat;
            this.form.deviceAddress = address;
            this.showMap = false;
        },
        //切换状态
        onChangeShow(checked) {
            if (checked) {
                this.form.status = 'active';
            } else {
                this.form.status = 'inactive';
            }
        },
        //取消
        cancel() {
            this.$emit('cancel');
        },
        //根据分类获取产品列表
        async getProductList(){
            let res = await productApi.remoteList({page:1,size:100});
            this.productList = res.data.list;
        }
    }
};
</script>

<style lang="scss" scoped></style>
